<template>
  <div>
    <el-upload
      accept=".png, .jpeg, .jpg"
      :action="$api + '/v1/upload/image'"
      list-type="picture-card"
      :before-upload="beforeUpload"
      :on-success="fileSuccess"
      :auto-upload="true"
      :file-list="fileList"
      :limit="fileMaxCount"
      :class="{'hide': fileToLarge}"
      name="name"
      :data="{'token': token}"
    >
      <i slot="default" class="el-icon-plus"></i>
      <div slot="file" slot-scope="{file}">
        <img class="el-upload-list__item-thumbnail" :src="file.url" />
        <span class="el-upload-list__item-actions">
          <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
            <i class="el-icon-zoom-in"></i>
          </span>
          <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
            <i class="el-icon-delete"></i>
          </span>
        </span>
      </div>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible" :modal="isModal">
      <img width="100%" :src="dialogImageUrl" alt />
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Upload",
  props: {
    fileListArr: {
      type: Array,
      required: true
    },
    fileListName: {
      type: String,
      required: true
    },
    fileMaxCount: {
      type: Number,
      required: true
    },
    isModal: {
      type: Boolean,
      default: true
    }
  },
  watch: {
    //监听upData的变化，进行相应的操作即可
    fileListArr: function(a, b) {
      //a是upData的新值，b是旧值
      console.log("最新值", a);
      this.fileList = a
    }
  },
  data() {
    return {
      disabled: false,
      dialogImageUrl: "",
      dialogVisible: false,
      fileList: this.fileListArr,
      token: localStorage.getItem("token")
    };
  },
  computed: {
    fileToLarge() {
      return this.fileList.length >= this.fileMaxCount;
    }
  },
  methods: {
    // 上传图片的格式和大小验证
    beforeUpload(file) {
      const isJPG =
        file.type === "image/jpeg" ||
        file.type === "image/jpg" ||
        file.type === "image/png";
      const isLt10M = file.size / 1024 / 1024 < 10;

      if (!isJPG) {
        this.$message.warning("上传头像图片只能是 JPG | PNG 格式!");
      }
      if (!isLt10M) {
        this.$message.error("上传头像图片大小不能超过 10MB!");
      }
      return isJPG && isLt10M;
    },
    // 删除图片的事件
    async handleRemove(file) {
      console.log("file删除图片------", file);
      console.log("this.fileList---------", this.fileList);
      let url = null;
      this.fileList.forEach(item => {
        if (item.id == file.id) {
          if (item.response) {
            url = item.response.data.url;
          } else {
            url = item.url;
          }
        }
      });
      let res = await this.$axios({
        url: this.$api + "/v1/upload/strike",
        method: "GET",
        params: {
          url: url
        }
      });
      console.log("删除图片res--------", res);
      if (res.data.code == 0) {
        this.fileList = this.fileList.filter(item => {
          return file.id !== item.id;
        });
        this.$emit("fileChange", {
          el: this.fileListName,
          arr: this.fileList
        });
      }
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    fileSuccess(r, file) {
      console.log("上传成功-------", r);
      console.log("上传成功file-------", file);
      console.log("this.fileList---------", this.fileList);
      file.id = r.data.data.id;
      this.fileList.push({ ...file });
      this.$emit("fileChange", {
        el: this.fileListName,
        arr: this.fileList
      });
    }
  }
};
</script>

<style lang="scss">
.hide .el-upload--picture-card {
  display: none;
}
</style>
